<template>
    <div class="common">
        <el-container class="common">
            <el-header class="header-title">
                <div class="header-t">{{ $t('webAuto.management') }}</div>
                <div class="button">
                    <el-button class="butt"><el-icon>
                            <Refresh />
                        </el-icon>{{ $t('webAuto.Refresh') }}</el-button>
                    <el-button class="butt" type="primary" @click="addHomePage"><el-icon>
                            <Plus />
                        </el-icon>{{ $t('webAuto.add') }}</el-button>
                </div>
            </el-header>
            <el-main>
                <div class="tableList">
                    <el-table :data="data.tableData" stripe border style="width: 100%">
                        <el-table-column prop="title" :label="$t('webAuto.name')" width="450">
                            <template #default="scope">
                                {{ scope.row.title }}  {{ scope.row.uuid }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" :label="$t('webAuto.type')" width="150"/>
                        <el-table-column prop="sort" :label="$t('webAuto.SortNumber')" width="150"/>
                        <el-table-column prop="managementPermissions" :label="$t('webAuto.InformationManagementPermissions')" width="350"/>
                        <el-table-column prop="readingPermission" :label="$t('webAuto.InformationReadingPermission')" width="350"/>
                        <el-table-column prop="attribute1" :label="$t('webAuto.NameOfInformationReleaseApprovalProcess')" width="350"/>
                        <el-table-column  fixed="right" :label="$t('webAuto.operate')" width="200">
                            <template #default="scope">
                                <el-button icon="Edit" text type="primary" @click="queryEdit(scope.row)">{{ $t('webAuto.edit') }}</el-button>
                                <el-button icon="delete"  text type="primary" @click="deleteData(scope.row)">{{ $t('webAuto.delete') }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-main>
        </el-container>
        <!--新增/ 编辑栏目 -->
        <el-dialog v-model="data.dialogVisible" :title="data.isEdit ? $t('webAuto.EditColumn') : $t('webAuto.AddColumn') " :close-on-press-escape="false"
            :close-on-click-modal="false" width="800">
            <div>
                <el-form :model="form" label-width="auto" ref="ruleFormRef" :rules="dataRules" style="max-width: 700px">
                    <el-row :gutter="24">
                        <el-col :span="24" class="mb20">
                            <el-form-item :label="$t('webAuto.name')"  prop="title">
                                <el-input v-model="form.title" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" class="mb20">
                             <el-form-item :label="$t('webAuto.type')" prop="type">
                                 <el-select v-model="form.type">
                                     <el-option
                                         v-for="item in options"
                                         :key="item.value"
                                         :label="item.label"
                                         :value="item.value"
                                     />
                                 </el-select>
                             </el-form-item>
                        </el-col>
                        <el-col :span="24" class="mb20">
                            <el-form-item :label="$t('webAuto.SortNumber')" prop="sort">
                                <el-input-number v-model="form.sort" :min="1" :max="99999"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" class="mb20">
                            <el-form-item :label="$t('webAuto.InformationManagementPermissions')" prop="managementPermissions">
                                <el-input v-model="form.managementPermissions" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" class="mb20">
                            <el-form-item :label="$t('webAuto.InformationReadingPermission')" prop="readingPermission">
                                <el-input v-model="form.readingPermission" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" class="mb20">
                            <el-form-item :label="$t('webAuto.NameOfInformationReleaseApprovalProcess')">
                                <el-input v-model="form.attribute1" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="mb20">
                            <el-form-item :label="$t('webAuto.OpenComment')">
                                <el-switch v-model="form.isComments"   active-value="Y" inactive-value="N"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="mb20">
                            <el-form-item :label="$t('webAuto.readingStatusFlag')">
                                <el-switch v-model="form.isReading"   active-value="Y" inactive-value="N"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button style="padding:2px 12px;height:28px" @click="data.dialogVisible = false">{{ $t('webAuto.cancel') }}</el-button>
                    <el-button type="primary" v-if="data.isEdit" style="padding:2px 12px;height:28px" @click="saveClick">
                        {{ $t('webAuto.sure') }}
                    </el-button>
                    <el-button type="primary" v-else style="padding:2px 12px;height:28px" @click="updateClick" >
                        {{ $t('webAuto.gengxing') }}
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import homePageApi, {deleteHomePage, getHomePage, updateHomePage} from '@/api/homePage'
import uuid from "@/utils/uuid.js";
import roleApi from "@/api/role.js";
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

onMounted(() => {
    homePageDetail()
})

const data = reactive({
    pageSize: 15,
    currentPage: 1,
    tableData: [],
    dialogVisible: false, //弹框
    isEdit: false
})

// 表单信息
const form = reactive({
    uuid:uuid(),
    title: '',
    type: '栏目',
    sort: '',
    managementPermissions: '',
    readingPermission: '',
    attribute1: '',
    isReading: 'Y',
    isComments: 'Y',
})
const options = [
    {
        value: '栏目',
        label: '栏目',
    }
]

const ruleFormRef = ref(null)
// 定义校验规则
const dataRules = reactive({
    title: [{ required: true, message: t('webAuto.MingChenKong'), trigger: 'blur' }],
    type: [{ required: true, message: t('webAuto.LeixingKong'), trigger: 'blur' }],
    sort: [{ required: true, message: t('webAuto.PaixuKong'), trigger: 'blur' }],
    managementPermissions: [{ required: true, message: t('webAuto.XingxiKong'), trigger: 'blur' }],
    readingPermission: [{ required: true, message: t('webAuto.QuanxianKong'), trigger: 'blur' }]
})
//表单验证
const validator = async (callback) => {
    try {
        return await ruleFormRef.value.validate()
    }
    catch (error) {
        return false
    }
}

// 查询
const homePageDetail = () => {
    homePageApi.getHomePage({
        pageSize: data.pageSize,
        pageNo: data.currentPage,
        type:'栏目'
    }).then(res => {
        data.tableData = res.data.records
        data.total = res.data.total
    })
}

// 新增表格
const addHomePage = () => {
    form.title = '',
    form.uuid = uuid(),
    form.type = '栏目',
    form.managementPermissions = '',
    form.readingPermission = '',
    form.attribute1 = '',
    form.isReading = 'Y',
    form.isComments = 'Y',
    data.dialogVisible = true
    data.isEdit = true
}

// 编辑表格
const queryEdit = (row) => {
    data.isEdit = false,
    data.dialogVisible = true,
    form.title = row.title,
    form.uuid = row.uuid,
    form.type = row.type,
    form.sort = row.sort,
    form.managementPermissions = row.managementPermissions,
    form.readingPermission = row.readingPermission,
    form.attribute1 = row.attribute1,
    form.isReading = row.isReading,
    form.isComments = row.isComments
}

//保存
const saveClick = () => {
    let validate = validator().then(result => {
        console.log(result); // 成功：打印 '操作成功！'
    }).catch(error => {
        console.error(error); // 失败：打印 '操作失败！'
    })
    if (!validate) {
        ElMessage.error(t('webAuto.BiaoDanError'))
        return
    }
    homePageApi.addHomePage(form).then(res => {
        ElMessage.success(t('webAuto.baocunChenGong'))
        data.dialogVisible = false
        homePageDetail()
    }).catch(err => {
        ElMessage.error(t('webAuto.baocunShiBai'))
    })
}

//更新
const updateClick = () => {
    homePageApi.updateHomePage(form).then(res => {
        ElMessage.success(t('webAuto.gengxingChenGong'))
        data.dialogVisible = false
        homePageDetail()
    }).catch(err => {
        ElMessage.error(t('webAuto.gengxingShiBai'))
    })
}

//删除
const deleteData = (row) => {
    console.log('row',row.uuid)
    ElMessageBox.confirm(t('webAuto.zaiciQunren'), t('webAuto.prompt'), {
        confirmButtonText: t('webAuto.sure'),
        cancelButtonText: t('webAuto.cancel'),
        type: 'warning',
    }).then(() => {
        // 在用户确认后发送自定义接口请求
        homePageApi.deleteHomePage(row.uuid).then(res => {
            ElMessage.success(t('webAuto.DeleteSuccessfully'))
            data.dialogVisible = false
            homePageDetail()
        }).catch(err => {
            ElMessage.error(t('webAuto.DeleteFailed'))
        })
    });
}


</script>


<style scoped lang="less">
@import "index.less";

//* {
//    margin: 0;
//    padding: 0;
//}
</style>
